<template>
	<div>
		<el-form :model="forms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item >
				 <el-select v-model="forms.role" style="width:300px;" placeholder="选择角色" >
							<template v-for="(item,idx) in roles"  >
									<el-option :key="idx" :label="item" :value="item"></el-option>
							</template>
					</el-select>
			</el-form-item>
			<el-form-item>
			 <el-input v-model="forms.account" placeholder="请输入登录账号" style="width:300px;"></el-input>
			</el-form-item>
			<el-form-item  required>
						<el-select v-model="provincesSel" style="width:300px;" placeholder="选择省份"  multiple>
						 <el-option v-for="province in provinceList"
                                  :key="province.province"
                                  :value="province.province"
                                  :label="province.province">
                       </el-option>
						</el-select>
			</el-form-item>
			<el-form-item  >
				<el-input v-model="forms.name" placeholder="请输入姓名" style="width:300px;"></el-input>
			</el-form-item>
			<el-form-item >
				<el-input v-model="forms.password" placeholder="请设置初始密码" style="width:300px;"></el-input>
			</el-form-item>

			<el-form-item v-if="forms.role=='阅卷老师'" >
				<template>
					<el-checkbox-group v-model="forms.courses" >
						<el-checkbox v-for="course in courses" :label="course.text" :key="course.text" :value="course.text"></el-checkbox>
					</el-checkbox-group>
				</template>
			</el-form-item>

			<el-form-item  prop="submit" >
				<el-button type="primary" style="width:300px" @click="submitForm('ruleForm')">修改</el-button>
			</el-form-item>


		</el-form>

	</div>

</template>
<script>
	//这里要俺需要引入，我不是一个对象
	import provinceCodeList from "../../utils/provinceCode";
	import {isvalidPhone,isvalidEmail} from '../../api/validata'
	import {user_info_update} from '../../api/api';
	import axios from	'axios'
	//定义一个全局的变量，谁用谁知道
	var validPhone=(rule, value,callback)=>{
			if (!value){
					callback(new Error('请输入电话号码'))
			}else  if (!isvalidPhone(value)){
				callback(new Error('请输入正确的11位手机号码'))
			}else {
					callback()
			}
	}
	export default {
		props:{	
			forms:{
				type:Object,
				default:function(){
					return{
						role:'',
						province:'',
						provinces:[],
						password:'',
						account:'',
						courses:[]
					}
				}}}, 
		data() {
			return {
				provinceall:[],
				provincesSel:[],
				roles:['教辅老师','阅卷老师','管理员'],
				courses:[],
				examType:[],
				rules: {
					provice: [
						{ required: true, message: '输入省份', trigger: 'blur' },
					],
					contact: [
						{ required: true, message: '输入联系老师', trigger: 'blur' },
					],
					phone: [
						{ required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
					],
					email: [
						{ required: true, message: '请输入email', trigger: 'blur' },//这里需要用到全局变量
						{ type: 'email', message: 'email格式错误,请输入正确的email', trigger: 'blur' }
					]
				}
			};
		},
		mounted:function(){
			console.log(this.forms)
			this.provincesSel=[...this.forms.provinces]
			this.courses=this.$store.state.exampaper
			this.provinceall=provinceall
			axios.defaults.headers.common["Art-Token"] = sessionStorage.getItem('Art-Token');
		},
		methods: {

			submitForm(formName) {
				console.log(this.forms)
				
				this.$refs[formName].validate((valid) => {
					if (valid) {
						
						console.log(this.forms)
						user_info_update(this.forms).then((res)=>{
							console.log(res)
						})
						alert('上传成功!');//这里就是符合规则，然后去调对应的接口
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}

</script>